<template>
  <div class="page-container">
    <div class="common-content">
      <div style=" padding-top:2px;padding-left:15px;">
        <!-- 列表搜索条件部分 label宽度要固定,优先展示输入框和下拉框 ;时间选择和地区选择放置在最后,因为后两个的尺寸表较大,换行后会导致整体对不齐 -->
        <div class="search-wrap">
          <el-form
            :inline="true"
            :model="searchFilters"
            :size="searchSize"
            ref="searchFilters"
            label-position="right"
          >
            <el-row class="search-input">
              <!-- 输入框 -->
              <el-form-item label="收款人名称：" prop="userName">
                <el-input
                  type="text"
                  size="mini"
                  placeholder="请输入收款人名称"
                  v-model="searchFilters.userName"
                />
              </el-form-item>
              <el-form-item label="来源：" prop="applySource">
                <el-select v-model="searchFilters.applySource">
                  <el-option label="H5" value="1"></el-option>
                  <el-option label="PC" value="2"></el-option>
                  <el-option label="Android" value="3"></el-option>
                  <el-option label="IOS" value="4"></el-option>
                  <el-option label="后台" value="5"></el-option>
                </el-select>
              </el-form-item>
              <el-form-item label="支付方式：" prop="payType">
                <el-select v-model="searchFilters.payType">
                  <el-option label="支付宝" value="1"></el-option>
                  <el-option label="微信" value="2"></el-option>
                  <el-option label="网银" value="3"></el-option>
                </el-select>
              </el-form-item>
            </el-row>
            <el-row class="search-button ">
              <el-button-group>
                <el-button type="primary" size="small" @click="queryData('searchFilters')">查询</el-button>
                <el-button type="primary" size="small" @click="resetForm()">重置</el-button>
              </el-button-group>
            </el-row>
            <el-form-item class="t_r w100 mb20">
              <el-button-group>
                <el-tooltip content="刷新" placement="top">
                  <el-button size="small" icon="fa fa-refresh" @click="findPage(null)"></el-button>
                </el-tooltip>
                <el-tooltip content="列显示" placement="top">
                  <el-button size="small" icon="fa fa-filter" @click="tabulate"></el-button>
                </el-tooltip>
                <el-tooltip content="导出" placement="top">
                  <el-button size="small" icon="fa fa-file-excel-o" @click="downloadExcel"></el-button>
                </el-tooltip>
              </el-button-group>
            </el-form-item>
          </el-form>
        </div>
      </div>
      <!-- 表格数据部分 -->
      <div class="table-wrap">
        <jic-table
          :height="350"
          :operationWidth="400"
          :tableList="tableList"
          :tableHeaderList="tableHeaderList"
          :totalSize="totalSize"
          :showEditOperation="false"
          :showDeleteOperation="false"
          :showDetailOperation="false"
          :showCustomOperation="false"
          :showIndex="false"
          :showSelection="false"
          :showOperation="false"
          @findPage="findPage"
          @handleSizeChange="handleSizeChange"
          @handlePageChange="handlePageChange"
          ref="jicTable"
        ></jic-table>
      </div>
    </div>
  </div>
</template>
<script>
// 引入资源
import jicTable from "@/components/jicComponentGallery/jicTable"; // 引入表格组件
export default {
  // 注册组件
  components: {
    jicTable
  },
  data() {
    return {
      totalSize: 0, // 返回数据总条数
      pageRequest: { pageNum: 1, pageSize: 10 }, // 请求数据的参数
      tableList: [], // 表格列表数据
      searchSize: "mini", // 用于控制该表单域下组件的尺寸   可选值为medium(中等)  small(小号)   mini(最小号) 、
      // 表格表头数据
      tableHeaderList: [
        //   { prop: "id", label: "ID", minWidth: 50 },
        { prop: "applyNo", label: "申请单编号", minWidth: 160 },
        {
          prop: "applySource",
          label: "申请来源",
          minWidth: 120,
          formatter: function(row, column, cellValue, index) {
            if (cellValue == 1) {
              return "H5";
            } else if (cellValue == 2) {
              return "PC";
            } else if (cellValue == 3) {
              return "Android";
            } else if (cellValue == 4) {
              return "IOS";
            } else if (cellValue == 5) {
              return "后台";
            }
          }
        },
        { prop: "applyUserName", label: "收款人", minWidth: 120 },
        { prop: "applyAmount", label: "申请金额", minWidth: 120 },
        { prop: "actualAmount", label: "实际到账金额", minWidth: 120 },
        {
          prop: "applyStatus",
          label: "提现单状态",
          minWidth: 120,
          formatter: function(row, column, cellValue, index) {
            if (cellValue == 1) {
              return "待审核";
            } else if (cellValue == 2) {
              return "审核成功";
            } else if (cellValue == 3) {
              return "审核拒绝";
            } else if (cellValue == 4) {
              return "待打款";
            } else if (cellValue == 5) {
              return "打款中";
            } else if (cellValue == 6) {
              return "打款成功";
            } else if (cellValue == 7) {
              return "打款失败";
            } else if (cellValue == 8) {
              return "申请完成";
            }
          }
        },
        { prop: "applyFailureReason", label: "失败原因", minWidth: 120 },
        { prop: "createTime", label: "申请时间", minWidth: 120 },
        {
          prop: "payType",
          label: "支付方式",
          minWidth: 120,
          formatter: function(row, column, cellValue, index) {
            if (cellValue == 1) {
              return "支付宝";
            } else if (cellValue == 2) {
              return "微信";
            } else if (cellValue == 2) {
              return "网银";
            }
          }
        },
        { prop: "payTime", label: "支付时间", minWidth: 120 }
      ],
      searchFilters: {
        applySource: null,
        applyStatus: 8,
        userName: null,
        payType: null
      }
    };
  },
  methods: {
    // 请求列表数据
    findPage(pageNum) {
      // 传过滤器的参数
      let this_ = this;
      if (this_.searchFilters == undefined || this_.searchFilters == null) {
        this_.searchFilters = {};
      }
      this_.searchFilters.start = this.pageRequest.pageNum;
      this_.searchFilters.limit = this.pageRequest.pageSize;
      this.utils.request.getApplyPageList(this_.searchFilters, function(res) {
        this_.tableList = res.data.rows;
        this_.totalSize = Number(res.data.total);
      });
    },
    // 查询
    queryData() {
      this.findPage();
    },

    // 重置
    resetForm() {
      if (this.$refs["searchFilters"] != undefined) {
        this.$refs["searchFilters"].resetFields();
      }
      this.findPage();
    },

    // 列表显示
    tabulate() {
      alert("列表显示");
    },

    // 导出数据
    downloadExcel() {
      alert("导出数据");
    },
    // 请求条数发生变化
    handleSizeChange(params) {
      console.log(
        params.size,
        "-------------父页面请求条数发生变化------------"
      );
      this.pageRequest.pageSize = params.size;
      this.findPage();
    },

    // 请求页数发生变化
    handlePageChange(params) {
      console.log(
        params.number,
        "-------------父页面请求页数发生变化------------"
      );
      this.pageRequest.pageNum = params.number;
      this.findPage();
    }
  },
  // dom元素绑定后再执行初始化数据操作
  mounted() {
    // 初始化请求数据
    this.findPage();
  }
};
</script>
<style lang="scss" scoped>
/* ele组件样式重置 */
.common-content {
  box-sizing: border-box;
  .search-wrap /deep/ {
    .el-form-item__label {
      height: 32px;
      line-height: 32px;
    }
    .el-form-item__content {
      height: 32px;
      line-height: 32px;
      width: 150px;
    }
    .el-input--mini .el-input__inner {
      height: 32px;
      line-height: 32px;
    }
    .el-date-editor.el-input,
    .el-date-editor.el-input__inner {
      width: 150px;
    }
  }
  /* 多日期样式重置 */
  .el-dater /deep/ .el-form-item__content {
    width: 330px;
  }
  /* 通用工具部分样式 */
  .tool-wrap {
    width: 100%;
    height: auto;
    position: relative;
    overflow: hidden;
    .left-area {
      float: left;
      width: 50%;
      text-align: left;
      button {
        margin-right: 15px;
        border-radius: 5px;
      }
    }
    .right-area {
      float: right;
      width: 50%;
      text-align: right;
    }
  }
  /* 表格部分样式 */
  .table-wrap {
    width: 100%;
    max-height: 600px;
    margin-top: 20px;
  }
  /* 弹窗样式 */
  .dialog-wrap /deep/ .el-dialog__footer {
    text-align: center !important;
  }
}
.mb20{
  margin-bottom: 20px;
}
</style>

